<template>
    <div class="header-bar" @click="goToSearch">
        <div class="title-center">
            <image :src="searchIcon" resize="cover" class="search-icon" />
            <text class="title-txt font-msyhl"> {{hotKeyWord || '请搜索商品或店铺'}}</text>
        </div>

        <text class="header-txt font-msyhl">搜索</text>
    </div>
</template>

<style scoped>
    .header-bar {
        width: 1080px;
        height: 60px;
        padding-left: 30px;
        padding-right: 30px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: transparent;
    }
    .title-center {
        flex: 1;
        flex-direction: row;
        align-items:center;
        height: 60px;
        border-radius: 100px;
        background-color: #e6e6e6;
    }
    .search-icon{
        width:50px;
        height: 50px;
        margin-left: 8px;
        margin-right: 8px;
    }
    .title-txt{
        font-size: 30px;
        color: #4d2805;
        opacity: 0.7;
    }
    .header-txt {
        padding-left: 20px;
        padding-right: 10px;
        font-size: 30px;
        color: #4d2805;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
    import searchIcon from 'assets/images/search-ico.png';
    import navigator from 'utils/navigator';
    import constant from 'constants/constant';

    export default{
        props: {
            hotKeyWord: {
                default: null
            }
        },
        data(){
            return{
                searchIcon: searchIcon
            }
        },
        methods: {
            goToSearch(){
                let options = {
                    classType: constant.Search_Class_Type
                }
                navigator.push(options);
            }
        }
    }
</script>
